<template>
<!--我的订单-->
  <div class="orders">
    <router-link to="/commequstion" class="question"><img src="../../assets/daochu.png" alt=""> 说明</router-link>
    <Tabs value="name1">
      <TabPane label="全部证书" name="name1">
        <div class="content">
          <div class="list clearfix">
            <ul class="clearfix">
              <li class="list_item">
                <div class="titles"><img src="../../assets/icon.png" alt="">《广州市物业通识证书名称》</div>
                <div class="clearfix">
                  <ul class="pull-left">
                    <li>
                      <span>持  证 人：</span>江小白
                    </li>
                    <li>
                      <span>证书编号：</span>NSC1689423
                    </li>
                    <li>
                      <span>发证机构：</span>中国物业管理协会
                    </li>
                  </ul>
                  <ul class="pull-right">
                    <li>
                      <span>发证时间：</span>2019/05/06
                    </li>
                    <li>
                      <span>有效期至：</span>2022/12/31
                    </li>
                    <li>
                      <span>登记时间：</span>2019/05/06
                    </li>
                  </ul>
                </div>

              </li>
              <li class="list_item">
                <div class="titles"><img src="../../assets/icon.png" alt="">《广州市物业通识证书名称》</div>
                <div class="clearfix">
                  <ul class="pull-left">
                    <li>
                      <span>持  证 人：</span>江小白
                    </li>
                    <li>
                      <span>证书编号：</span>NSC1689423
                    </li>
                    <li>
                      <span>发证机构：</span>中国物业管理协会
                    </li>
                  </ul>
                  <ul class="pull-right">
                    <li>
                      <span>发证时间：</span>2019/05/06
                    </li>
                    <li>
                      <span>有效期至：</span>2022/12/31
                    </li>
                    <li>
                      <span>登记时间：</span>2019/05/06
                    </li>
                  </ul>
                </div>
                <p class="btn"><a href="">转换学分考试</a></p>
              </li>
              <li class="list_item">
                <div class="titles"><img src="../../assets/icon.png" alt="">《广州市物业通识证书名称》</div>
                <div class="clearfix">
                  <ul class="pull-left">
                    <li>
                      <span>持  证 人：</span>江小白
                    </li>
                    <li>
                      <span>证书编号：</span>NSC1689423
                    </li>
                    <li>
                      <span>发证机构：</span>中国物业管理协会
                    </li>
                  </ul>
                  <ul class="pull-right">
                    <li>
                      <span>发证时间：</span>2019/05/06
                    </li>
                    <li>
                      <span>有效期至：</span>2022/12/31
                    </li>
                    <li>
                      <span>登记时间：</span>2019/05/06
                    </li>
                  </ul>
                </div>
                <p class="btn"><a href="">继续教育</a></p>
              </li>
              <li class="list_item">
                <div class="titles"><img src="../../assets/icon.png" alt="">《广州市物业通识证书名称》</div>
                <div class="clearfix">
                  <ul class="pull-left">
                    <li>
                      <span>持  证 人：</span>江小白
                    </li>
                    <li>
                      <span>证书编号：</span>NSC1689423
                    </li>
                    <li>
                      <span>发证机构：</span>中国物业管理协会
                    </li>
                  </ul>
                  <ul class="pull-right">
                    <li>
                      <span>发证时间：</span>2019/05/06
                    </li>
                    <li>
                      <span>有效期至：</span>2022/12/31
                    </li>
                    <li>
                      <span>登记时间：</span>2019/05/06
                    </li>
                  </ul>
                </div>
                <div class="btn">
                  <p class="pull-left"><span>状态：  </span>待考试</p>
                  <a href="" class="look">查看考试详情>> </a></div>
              </li>
              <li class="list_item">
                <div class="titles"><img src="../../assets/icon.png" alt="">《广州市物业通识证书名称》</div>
                <div class="clearfix">
                  <ul class="pull-left">
                    <li>
                      <span>持  证 人：</span>江小白
                    </li>
                    <li>
                      <span>证书编号：</span>NSC1689423
                    </li>
                    <li>
                      <span>发证机构：</span>中国物业管理协会
                    </li>
                  </ul>
                  <ul class="pull-right">
                    <li>
                      <span>发证时间：</span>2019/05/06
                    </li>
                    <li>
                      <span>有效期至：</span>2022/12/31
                    </li>
                    <li>
                      <span>登记时间：</span>2019/05/06
                    </li>
                  </ul>
                </div>
                <div class="btn">
                  <p class="pull-left"><span>状态：  </span>考试不通过</p>
                  <a href="" >重新转换考试</a></div>
              </li>
              <li class="list_item">
                <div class="titles"><img src="../../assets/icon.png" alt="">《广州市物业通识证书名称》</div>
                <div class="clearfix">
                  <ul class="pull-left">
                    <li>
                      <span>持  证 人：</span>江小白
                    </li>
                    <li>
                      <span>证书编号：</span>NSC1689423
                    </li>
                    <li>
                      <span>发证机构：</span>中国物业管理协会
                    </li>
                  </ul>
                  <ul class="pull-right">
                    <li>
                      <span>发证时间：</span>2019/05/06
                    </li>
                    <li>
                      <span>有效期至：</span>2022/12/31
                    </li>
                    <li>
                      <span>登记时间：</span>2019/05/06
                    </li>
                  </ul>
                </div>
                <div class="btn">
                  <a href="" >继续教育</a>
                  <a href="" >申请转换证明</a></div>
              </li>
              <li class="list_item">
                <div class="titles"><img src="../../assets/icon.png" alt="">《广州市物业通识证书名称》</div>
                <div class="clearfix">
                  <ul class="pull-left">
                    <li>
                      <span>持  证 人：</span>江小白
                    </li>
                    <li>
                      <span>证书编号：</span>NSC1689423
                    </li>
                    <li>
                      <span>发证机构：</span>中国物业管理协会
                    </li>
                  </ul>
                  <ul class="pull-right">
                    <li>
                      <span>发证时间：</span>2019/05/06
                    </li>
                    <li>
                      <span>有效期至：</span>2022/12/31
                    </li>
                    <li>
                      <span>登记时间：</span>2019/05/06
                    </li>
                  </ul>
                </div>
                <div class="btn">

                  <a href="" >申请转换证明</a></div>
              </li>
              <li class="list_item">
                <div class="titles"><img src="../../assets/icon.png" alt="">《广州市物业通识证书名称》</div>
                <div class="clearfix">
                  <ul class="pull-left">
                    <li>
                      <span>持  证 人：</span>江小白
                    </li>
                    <li>
                      <span>证书编号：</span>NSC1689423
                    </li>
                    <li>
                      <span>发证机构：</span>中国物业管理协会
                    </li>
                  </ul>
                  <ul class="pull-right">
                    <li>
                      <span>发证时间：</span>2019/05/06
                    </li>
                    <li>
                      <span>有效期至：</span>2022/12/31
                    </li>
                    <li>
                      <span>登记时间：</span>2019/05/06
                    </li>
                  </ul>
                </div>
                <div class="btn">
                  <p class="pull-left"><span>状态：  </span>待转换审核</p>
                  <a href="" >继续教育</a></div>
              </li>
              <li class="list_item">
                <div class="titles"><img src="../../assets/icon.png" alt="">《广州市物业通识证书名称》</div>
                <div class="clearfix">
                  <ul class="pull-left">
                    <li>
                      <span>持  证 人：</span>江小白
                    </li>
                    <li>
                      <span>证书编号：</span>NSC1689423
                    </li>
                    <li>
                      <span>发证机构：</span>中国物业管理协会
                    </li>
                  </ul>
                  <ul class="pull-right">
                    <li>
                      <span>发证时间：</span>2019/05/06
                    </li>
                    <li>
                      <span>有效期至：</span>2022/12/31
                    </li>
                    <li>
                      <span>登记时间：</span>2019/05/06
                    </li>
                  </ul>
                </div>
                <div class="btn">
                  <p class="pull-left"><span>状态：  </span>审核不通过 <a href="" class="recuse">(查看原因)</a></p>
                  <a href="" >重新申请证明</a></div>
              </li>
              <li class="list_item">
                <div class="titles"><img src="../../assets/icon.png" alt="">《广州市物业通识证书名称》</div>
                <div class="clearfix">
                  <ul class="pull-left">
                    <li>
                      <span>持  证 人：</span>江小白
                    </li>
                    <li>
                      <span>证书编号：</span>NSC1689423
                    </li>
                    <li>
                      <span>发证机构：</span>中国物业管理协会
                    </li>
                  </ul>
                  <ul class="pull-right">
                    <li>
                      <span>发证时间：</span>2019/05/06
                    </li>
                    <li>
                      <span>有效期至：</span>2022/12/31
                    </li>
                    <li>
                      <span>登记时间：</span>2019/05/06
                    </li>
                  </ul>
                </div>
                <div class="btn">
                  <p class="pull-left1"><span>状态：  </span>审核通过 <a href="" class="recuse">(下载转换证明)</a></p>
                  <p class="pull-left1"><span>证明有效期至：</span>2022年12月31日 </p>
                </div>
              </li>
            </ul>

          </div>
        </div>
      </TabPane>
      <TabPane label="技能等级证书" name="name2">
        <div class="content">
          <!--========-->
          <div class="list clearfix" style="display: none">
            <ul class="clearfix">
              <li class="list_item">
                <div class="titles"><img src="../../assets/icon.png" alt="">《广州市物业通识证书名称》</div>
                <div class="clearfix">
                  <ul class="pull-left">
                    <li>
                      <span>持  证 人：</span>江小白
                    </li>
                    <li>
                      <span>证书编号：</span>NSC1689423
                    </li>
                    <li>
                      <span>发证机构：</span>中国物业管理协会
                    </li>
                  </ul>
                  <ul class="pull-right">
                    <li>
                      <span>发证时间：</span>2019/05/06
                    </li>
                    <li>
                      <span>有效期至：</span>2022/12/31
                    </li>
                    <li>
                      <span>登记时间：</span>2019/05/06
                    </li>
                  </ul>
                </div>
                <p class="btn"><a href="">继续教育</a></p>
              </li>
              <li class="list_item">
                <div class="titles"><img src="../../assets/icon.png" alt="">《广州市物业通识证书名称》</div>
                <div class="clearfix">
                  <ul class="pull-left">
                    <li>
                      <span>持  证 人：</span>江小白
                    </li>
                    <li>
                      <span>证书编号：</span>NSC1689423
                    </li>
                    <li>
                      <span>发证机构：</span>中国物业管理协会
                    </li>
                  </ul>
                  <ul class="pull-right">
                    <li>
                      <span>发证时间：</span>2019/05/06
                    </li>
                    <li>
                      <span>有效期至：</span>2022/12/31
                    </li>
                    <li>
                      <span>登记时间：</span>2019/05/06
                    </li>
                  </ul>
                </div>
                <p class="btn"><a href="">继续教育</a></p>
              </li>

            </ul>
          </div>
          <!--成功时-->
          <div class="success">
            <div class="logo">
              <img src="../../assets/success1.png" alt="">
              <p>恭喜您，报名成功！</p>
            </div>
            <ul>
              <li><span>报名项目：</span>2020年春季中级物业师考试</li>
              <li><span>理论考试：</span>2020-05-06  10:00 - 11:30</li>
              <li><span>案例考试：</span>2020-05-06  14:00 - 16:30</li>
              <li><span>考试方式：</span>线上</li>
              <li><span>考试费用：</span>￥300.00</li>
              <li><span>考试说明：</span><router-link to="/">查看</router-link> </li>
              <li>报名成功，短信通知已发送，请按时按参加考试。</li>
              <li><Button size="large">返回证书列表</Button><router-link to="/ziliao/nextjiaoyu"><Button  size="large">开始继续教育</Button></router-link></li>
            </ul>
          </div>

        </div>
      </TabPane>
      <TabPane label="学分银行证书" name="name3">标签三的内容</TabPane>
    </Tabs>
    <Modal v-model="modal" width="400" class-name="vertical-center-modal">
      <p slot="header" class="header">技能等级证书及继续教育说明</p>
      <div class="notice">
        根据国家证书要求，所持有的证书需通过继续教育学延续证书有效期。
        技能等级证书继续教育包括：课程学时和活动时。
        学员缴费后在学习周期内完成继续教育获得相应学时。。
      </div>

      <div slot="footer" style="text-align: center">
        <a href="" class="read">我已阅读 (10s)</a>
      </div>
    </Modal>
    <Modal v-model="modal1" width="400" class-name="vertical-center-modal">
      <p slot="header" class="header">缴费学习</p>
      <ul class="notice">
        <li><span>学习周期：</span>2020/01/01 至 2020/12/31</li>
        <li><span>证书延期：</span>2021/12/3</li>
        <li><span>学时要求：</span>40学时</li>
        <li><span>学费费用：</span>300元</li>
      </ul>
      <div class="notice">根据国家证书要求，获得证书继续教育学时，延续证书有效期！</div>
      <div slot="footer" style="text-align: center">
        <a href="" class="read">缴费学习</a>
      </div>
    </Modal>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .orders{
    position: relative;
  }
  .list{
    background-color: #fff;
    padding:40px 15px 0;
    text-align: left;
    .list_item{
      padding: 30px 25px 15px;
      box-shadow: 0px 0px 10px #ececec;
      border-radius: 10px;
      float: left;
      margin-bottom: 40px;
      width: 360px;
      height: 225px;
      &:nth-child(2n+1){
        margin-right: 40px;
      }
      .titles{
        font-size: 16px;
        color: #000;
        img{
          vertical-align: middle;
          margin-right: 5px;
        }
      }
      .clearfix{
        border-bottom: 1px dashed #DBDBDB;
        margin-bottom: 15px;
      }
      ul{
        margin: 10px 0 15px;
        li{
          font-size: 12px;
          color: #666;
          line-height: 25px;
          span{
            color: #000;
          }
        }
      }
      .btn{
        text-align: right;
        a{
          display: inline-block;
          width: 100px;
          height: 36px;
          line-height: 36px;
          border-radius: 5px;
          font-size: 14px;
          text-align: center;
          border:1px solid #B2936B;
          color: #B2936B;
          /*&:first-child{*/
            /*border:1px solid #999;*/
            /*color: #999;*/
            /*margin-right: 50px;*/
          /*}*/

        }
        .pull-left,.pull-left1{
          color: #666;
          font-size: 14px;
          margin-top: 8px;
          span{
            color: #000;
          }
          .recuse{
            border:none;
            color: #0066CC;
            width: auto;
            height: auto;
            line-height: normal;
          }
        }
        .pull-left1{
          text-align: left;
          margin-top: 0;
        }
        .look{
          border:none;
          width: 105px;
        }
      }
    }
  }
  .question{
    position: absolute;
    right: 0;
    top:10px;
    font-size: 16px;
    color: #666;
    img{
      vertical-align: bottom;
    }
  }
  .header{
    font-size: 22px;
    color: #333;
    text-align: center;
    font-weight: 700;
    height: 30px;
    line-height: 30px;
  }
  .notice{
    font-size: 14px;
    color: #666;
    line-height: 25px;
    span{
      color: #000;
    }
  }
  .read{
    background-color: #B2936B;
    color: #fff;
    display: inline-block;
    width: 150px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 5px;
    font-size: 18px;
  }
  .success{
    .logo{
      text-align: center;
      font-size: 16px;
      color: #000;
      width: 660px;
      margin: auto;
      padding: 60px 0 40px;
      border-bottom: 1px dashed #ccc;
      p{
        margin-top: 20px;
      }

    }
    ul{
      width: 660px;
      margin:40px  auto 0;
      li{
        font-size: 14px;
        color: #666;
        line-height: 25px;
        button{
          margin-top: 50px;
          border:1px solid #B2926B;
          color: #B2926B;
          font-size: 16px;
          margin-right: 30px;
          height: 50px;
          width: 200px;
        }
        span{
          color: #000;
        }
      }
    }
  }

</style>
<script type="text/ecmascript-6">
  import centers from '../template/center'
    export default {
        name: 'orderdetail',
        props: {},
        data() {
            return {
              modal:false,
              modal1:true
            };
        },
        methods: {

        },
        created() {

        },
        components: {
          centers
        }
    }
</script>
